<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: black;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            overflow: hidden;
        }

        .gallery {
            position: relative;
            perspective: 1500px;
            transform-style: preserve-3d;
            width: 200px;
            aspect-ratio: 1;
            background: silver;
            transform: rotate(45deg);
        }

        .gallery .image {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 4px solid white;
            box-sizing: border-box;
            transition: 1s ease;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: calc(var(--total) - var(--i));
            overflow: hidden;
        }

        .gallery .image img {
            --rotate: rotate(-45deg);
            transform: var(--rotate);
            transition: .3s ease;
        }

        .gallery .image:nth-of-type(odd) {
            --hovermove: -100px, 100px;
            --translate: calc((var(--i) - 1) * -70px), calc((var(--i) - 1) * 70px);
            --tZ: calc((var(--i) - 1) * -350px);
            animation: deploy 1.5s ease forwards;
        }

        .gallery .image:nth-of-type(even) {
            --hovermove: 100px, -100px;
            --translate: calc(var(--i) * 70px), calc(var(--i) * -70px);
            --tZ: calc(var(--i) * -350px);
            animation: deploy 1.5s ease forwards;
        }

        .gallery .image:hover img,
        .gallery .image.only-hover img {
            transform: var(--rotate) scale(1.1);
        }

        .gallery .image.only-hover {
            animation: clickAnimation 1s ease;
            z-index: 9;
        }

        .gallery.hidden-gallery .image {
            animation: close 1.5s ease forwards;
        }

        @keyframes deploy {
            from {
                transform: translate(0px, 0px) translateZ(0px);
            }

            to {
                transform: translate(var(--translate)) translateZ(var(--tZ));
            }
        }

        @keyframes close {
            from {
                transform: translate(var(--translate)) translateZ(var(--tZ));
            }

            to {
                transform: translate(0px, 0px) translateZ(0px);
            }
        }

        @keyframes clickAnimation {
            0% {
                transform: translate(var(--translate)) translateZ(var(--tZ));
            }

            20% {
                transform: translate(var(--hovermove)) translateZ(0px);
            }

            100% {
                transform: translate(calc(var(--i) * 0px), calc(var(--i) * 0px));
            }
        }
    </style>
</head>

<body>
    <div class="scene">
        <div class="gallery" style="--total: 7">
            <div class="image" style="--i: 1">
                <img src="https: //picsum.photos/300/300" alt="image">
            </div>
            <div class="image" style="--i: 2">
                <img src="https: //picsum.photos/301/301" alt="image">
            </div>
            <div class="image" style="--i: 3">
                <img src="https: //picsum.photos/302/302" alt="image">
            </div>
            <div class="image" style="--i: 4">
                <img src="https: //picsum.photos/303/303" alt="image">
            </div>
            <div class="image" style="--i: 5">
                <img src="https: //picsum.photos/304/304" alt="image">
            </div>
            <div class="image" style="--i: 6">
                <img src="https: //picsum.photos/305/305" alt="image">
            </div>
            <div class="image" style="--i: 7">
                <img src="https: //picsum.photos/306/306" alt="image">
            </div>
        </div>
    </div>


    <script>
        const images = document.querySelectorAll('.image');
        images.forEach(function (image, i) {
            image.addEventListener('click', function () {
                const isActive = this.classList.contains('only-hover');
                images.forEach(function (img) {
                    img.classList.remove('only-hover');
                });
                if (i !== 0 & !isActive) {
                    this.classList.add('only-hover');
                } else if (i == 0) {
                    this.closest('.gallery').classList.toggle('hidden-gallery');
                }
            });
        });

    </script>
</body>

</html>